<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../css/geological/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/animate.css"/>
    <link rel="stylesheet" type="text/css" href="../../js/geological/jquery.confirm/jquery.confirm.css"/>
    <link rel="stylesheet" type="text/css" href="../../js/geological/zTree/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/geological/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="../../css/geological/public.css"/>
    <script type="text/javascript" src="../../js/geological/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../../js/geological/messages_zh.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.niceScroll.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.confirm/jquery.confirm.js"></script>
    <script type="text/javascript" src="../../js/geological/zTree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../../js/geological/jquery.dataTables.min.js"></script>
    <!--[if lt IE 9]>
    <script src="../../js/geological/html5shiv.min.js"></script>
    <script src="../../js/geological/respond.min.js"></script>
    <![endif]-->
    <title>图表分析</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.7rem!important;
        }
    </style>
</head>
<body id="chart-analyze">

<div class="data-search-main clearfix">
    <div class="sm-left">
       <div class="title">
           <div class="title-icon"></div>
           检测成果
           <div class="title-btn"></div>
       </div>
        <div class="search-box disno">
            <input type="text" id="search-input" name="search" placeholder="输入设备名称" onblur="this.placeholder='输入设备名称'"  onfocus="this.placeholder=''"/>
            <div class="search-btn"></div>
        </div>
        <div class="tree">
            <ul id="busTree" class="ztree">

            </ul>
        </div>
        <p class="left-open-btn disno"></p>
    </div>
    <div class="big-right relative">
        <div class="right-top-tools">
            <div class="data-class-btns clearfix">
                <div class="class-btn active">
                    <div class="icon icon-bg wy">
                        <div class="pic"></div>
                    </div>
                    位移监测
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg yl">
                        <div class="pic"></div>
                    </div>
                    雨量监测
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg xz">
                        <div class="pic"></div>
                    </div>
                    拉线位移
                </div>
                <div class="class-btn">
                    <div class="icon icon-bg ot">
                        <div class="pic"></div>
                    </div>
                    其他
                </div>
            </div>
            <div class="zd-tab clearfix z1">
                <div class="my-tab">
                    gnss201
                </div>
                <div class="my-tab">
                    gnss211
                </div>
                <div class="my-tab">
                    gnss221
                </div>
                <div class="draptop">

                </div>
            </div>
            <div class="zd-tab clearfix z2 disno">
                <div class="my-tab">
                    gnss201
                </div>
                <div class="my-tab">
                    gnss211
                </div>
                <div class="my-tab">
                    gnss221
                </div>
            </div>
            <div class="zd-tab clearfix z3 disno">
                <div class="my-tab">
                    gnss201
                </div>
                <div class="my-tab">
                    gnss211
                </div>
                <div class="my-tab">
                    gnss221
                </div>
            </div>
            <div class="zd-tab clearfix z4 disno">
                <div class="my-tab">
                    gnss201
                </div>
                <div class="my-tab">
                    gnss211
                </div>
                <div class="my-tab">
                    gnss221
                </div>
            </div>
            <div class="right-top-tools-open">

            </div>
        </div>
        <div class="chart-container clearfix">
            <div class="chart-tool">
                <select name="time-gap" id="time-select">
                    <option value="1">一小时</option>
                    <option value="2">半小时</option>
                    <option value="3">15分钟</option>
                    <option value="4">5分钟</option>
                </select>
                <div class="data-out">
                    生成报表
                </div>
                <div class="chart-tool-btn"></div>
            </div>
            <div class="my-chart">
                <img src="../../images/geological/vlitay-chart.png" width="100%" alt=""/>
            </div>
        </div>
        
    </div>
</div>
<script type="text/javascript" src="../../js/geological/public.js"></script>
<script type="text/javascript">
    $(".data-class-btns").on("click",".class-btn",function(){
        var ii=$(this).index();
//        var ai=$(".class-btn.active").length;
        if(ii>0){
            $(".z"+(ii+1)).toggle();
            $(this).toggleClass("active");
        }
    });
    $(".table-tab").on("click",".tab",function(){
        $(this).addClass("current").siblings(".tab").removeClass("current");
    });
    var theight=0;
    $(".draptop").on("click",function(){
        theight=$(".right-top-tools")[0].clientHeight;
        $(".right-top-tools").animate({'height':"0px"});
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },300);
    });
    $(".right-top-tools-open").on("click",function(){
        $(".right-top-tools").animate({'height':theight+'px'},300,"linear",function(){
            $(".right-top-tools").css({'height':"auto"});
        });
        $(this).hide();
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#datatable').DataTable( {
            "info":0,
            "lengthChange":0,
            "searching":0,
            "ordering":0,
            "processing": 1,
            "serverSide": 1,
            "stripeClasses": [ 'strip1','strip2'],
            "ajax": "test.json",
            "language": {
                "paginate": {
                    "next": "下一页",
                    "previous": "上一页",
                }
            }
        } );
        //    jq.ztree
        var setting = {
//            isSimpleData : true,              //数据是否采用简单 Array 格式，默认false
//            treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性
//            treeNodeParentKey : "pId",        //在isSimpleData格式下，当前节点的父节点id属性
//            showLine : true,                  //是否显示节点间的连线
//            checkable : true                  //每个节点上是否显示 CheckBox
        };
        var zNodes =[
            { name:"深圳", open:true,iconSkin:"myTree-level1",
                children: [
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",iconSkin:"myTree-level2", isParent:true}
                ]},
            { name:"上海",iconSkin:"myTree-level1",
                children: [
                    { name:"某某区", open:true,
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]},
                    { name:"某某区",
                        iconSkin:"myTree-level2",
                        children: [
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"},
                            { name:"某某站", iconSkin:"myTree-level3"}
                        ]}
                ]},
            { name:"广州",iconSkin:"myTree-level1", isParent:true}
        ];
        zTreeObj = $.fn.zTree.init($("#busTree"), setting, zNodes);
////        jq.confirm
//        $('.news-tool>div.del').click(function(){
//            var elem = $(this).closest('li');
//            $.confirm({
//                'title':'警告！',
//                'message':'删除后将不可恢复，确认删除？',
//                'buttons':{
//                    '是':{
//                        'class'	: 'blue',
//                        'action': function(){
//                            elem.fadeOut();
//                        }
//                    },
//                    '否':{
//                        'class'	: 'gray',
//                        'action': function(){}
//                    }
//                }
//            });
//        });
////        jq.nicescroll
        $(".sm-left>.tree").niceScroll({
            cursorcolor:"#999",
            cursoropacitymax:1,
            touchbehavior:false,
            cursorwidth:"6px",
            cursorborder:"0",
            cursorborderradius:"5px",
            autohidemode:false,
        })
    });
</script>
</body>
</html>